<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .one{
            width: 134px;
            height: 0px;
            background-image: url("imgs/logo.png");
            /*text-indent: -5000px;*/
            padding-top: 76px;
            overflow: hidden;
        }
        .two{
            width: 500px;
            height: 300px;
            background-color: #bbbbbb;
        }
        .two .twoo{
            width: 100px;
            height: 100px;
            background-color: red;
            /*是该div去右边*/
            margin-left: auto;
        }
        .three, .forth{
            width: 100px;
            height: 100px;
        }
        .forth{
            background-color: #888888;
        }
        .three{
            /*display影藏不会占据原来的位置*/
            display: none;
            /*visibility 隐藏会占据原来的位置*/
            /*visibility: hidden;*/
            background-color: purple;
        }
        .t1 img{
            vertical-align: middle;
        }
        .jl{
            width: 56px;
            height: 56px;
            background: url("imgs/qq.png") no-repeat -700px -100px;
        }
    </style>
</head>
<body>
<!--让内容出空间-->
<div class="one">
    <h1>搜狗</h1>
</div>
<div class="two">
    <div class="twoo"></div>
</div>
<div class="three">

</div>
<div class="forth">

</div>
<div class="t1">
    <img src="imgs/logo.png">你好呀
</div>

<!-- 700 75 -->
<div class="jl">

</div>

</body>
</html>